<script>
/*
* @Author: JanKinCai
* @Date:   2019-11-01 00:59:32
* @Last Modified by:   chengxue
* @Last Modified time: 2019-11-05 14:42:44
*/
</script>
<template>
    <div class="fold-shuttle-panel mt-3">
        <!-- <div class="fold-shuttle-content">
            <div
                class="all-level"
            >
                <div
                    v-for="(layer, index) in layerDevice"
                    :key="layer.id"
                >
                    <Checkbox
                        v-model="checkAll[index]"
                        @click.prevent.native.stop="handleCheckAll(layer.id, index)"
                    ></Checkbox>
                    {{layer.name}}的设备（{{layer.devices.length}}）

                    <ul slot="content">
                        <CheckboxGroup
                            v-model="checkAllGroup[index]"
                            @on-change="checkAllGroupChange"
                        >
                            <li
                                v-for="(device, key) in layer.devices"
                                :key="key"
                                class="fs-6"
                            >
                                <Checkbox
                                    :label="device.id"
                                    class="mr-1"
                                ></Checkbox>
                                <p class="lineClamp1">{{device.name}}</p>（{{device.ip}}）
                            </li>
                        </CheckboxGroup>
                    </ul>

                </div>
            </div>
        </div> -->
        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;" v-for='(item, index) in 3'>
            <Checkbox
                :indeterminate="indeterminate[index]"
                :value="checkAll[index]"
                @click.prevent.native="handleCheckAll(index)">全选</Checkbox>
        </div>
        <CheckboxGroup v-for='(item, index) in 3' v-model="checkAllGroup[index]" @on-change="checkAllGroupChange">
            <Checkbox label="香蕉"></Checkbox>
            <Checkbox label="苹果"></Checkbox>
            <Checkbox label="西瓜"></Checkbox>
        </CheckboxGroup>
    </div>
</template>
<script>
const transferData = []
// 资产 - 层级穿梭框
export default {
    props: {
        // 是否渲染该模块，根据此值判断是否获取数据
        isBatchImportRender: {
            type: Boolean,
            default: false
        },
        level: {
            type: Object,
            default: function () {
                return {
                    name: '默认层级',
                    id: 34
                }
            }
        }
    },
    data () {
        return {
            transferData,
            indeterminate: [true, true, true],
            checkAll: [false, false, false],
            // 设置 indeterminate 状态，只负责样式控制
            collapseName: 'default',
            // 所有的层级以及对应的所有设备信息
            layerDevice: [{"id":"default","name":"未分层","devices":[{"id":44,"name":"1111","category":"PC","ip":null,"mac":null,"value":1,"description":"","created_at":"2019-11-05T11:52:28.796604+08:00","ip_mac_bond":false,"parent_link":null,"layer":null,"parent_ip":""},{"id":35,"name":"精华主要只是美国不断直接朋","category":"触摸屏","ip":"31.74.137.113","mac":"10:15:2E:33:A3:0B","value":2,"description":"企业他的由于包括当前首页国际作者帖子.","created_at":"2019-10-21T16:27:34.586284+08:00","ip_mac_bond":false,"parent_link":null,"layer":null,"parent_ip":""},{"id":34,"name":"精华主要只是美国不断直接朋友包括她的.","category":"Server","ip":"31.74.137.111","mac":"10:15:2E:33:A3:0C","value":2,"description":"企业他的由于包括当前首页国际作者帖子.","created_at":"2019-10-21T16:27:34.586284+08:00","ip_mac_bond":false,"parent_link":null,"layer":null,"parent_ip":""},{"id":29,"name":"精华主要","category":"服务器","ip":"31.74.137.3","mac":"10:15:2E:33:A3:01","value":2,"description":"企业他的由于包括当前首页国际作者帖子.","created_at":"2019-10-18T18:05:40.853430+08:00","ip_mac_bond":false,"parent_link":null,"layer":null,"parent_ip":""},{"id":28,"name":"精华主要","category":"服务器","ip":"31.74.137.38","mac":"10:15:2E:33:A3:0A","value":2,"description":"企业他的由于包括当前首页国际作者帖子.","created_at":"2019-10-18T18:05:40.853430+08:00","ip_mac_bond":false,"parent_link":null,"layer":null,"parent_ip":""},{"id":27,"name":"经济作者登录分析的是建设到了目前中文.","category":"主机卫士","ip":"226.230.15.193","mac":"0E:AD:FB:B9:6A:81","value":2,"description":"科技上海为什一定以后政府准备如果在线.","created_at":"2019-10-18T18:05:40.851372+08:00","ip_mac_bond":true,"parent_link":null,"layer":null,"parent_ip":""},{"id":25,"name":"发表密码他们世界功能方式产品等级精华.","category":"安全设备","ip":"143.31.181.54","mac":"73:93:EB:BC:9E:78","value":2,"description":"工具最新那么文章名称根据这些合作这个.","created_at":"2019-10-18T18:05:40.745324+08:00","ip_mac_bond":true,"parent_link":null,"layer":null,"parent_ip":""}]},{"id":23,"devices":[{"id":42,"name":"测试","category":"PC","ip":"1.1.1.7","mac":null,"value":1,"description":"123","created_at":"2019-11-05T10:31:09.115067+08:00","ip_mac_bond":false,"parent_link":41,"layer":23,"parent_ip":"1.1.1.6"},{"id":41,"name":"测试","category":"PC","ip":"1.1.1.6","mac":null,"value":1,"description":"123","created_at":"2019-11-05T10:30:48.054559+08:00","ip_mac_bond":false,"parent_link":null,"layer":23,"parent_ip":""}],"name":"改个名字测试一下222dddd"},{"id":24,"devices":[{"id":40,"name":"15","category":"PC","ip":"1.1.1.5","mac":null,"value":1,"description":"","created_at":"2019-11-05T10:28:11.191315+08:00","ip_mac_bond":false,"parent_link":39,"layer":24,"parent_ip":"1.1.1.4"},{"id":39,"name":"测试","category":"PC","ip":"1.1.1.4","mac":null,"value":1,"description":"1234","created_at":"2019-11-05T10:27:06.044575+08:00","ip_mac_bond":false,"parent_link":38,"layer":24,"parent_ip":"1.1.1.3"},{"id":38,"name":"11","category":"PC","ip":"1.1.1.3","mac":null,"value":1,"description":"测试","created_at":"2019-11-05T10:24:03.628387+08:00","ip_mac_bond":false,"parent_link":37,"layer":24,"parent_ip":"12.12.12.12"},{"id":37,"name":"123","category":"PC","ip":"12.12.12.12","mac":null,"value":1,"description":"123456","created_at":"2019-11-05T10:22:16.863722+08:00","ip_mac_bond":false,"parent_link":36,"layer":24,"parent_ip":"1.1.1.1"},{"id":36,"name":"测试添加","category":"PC","ip":"1.1.1.1","mac":null,"value":1,"description":"123456","created_at":"2019-11-05T10:17:00.582311+08:00","ip_mac_bond":false,"parent_link":26,"layer":24,"parent_ip":"153.5.174.112"},{"id":26,"name":"欢迎重要更","category":"PC/计算机","ip":"153.5.174.112","mac":"53:0C:7D:8F:1F:48","value":1,"description":"大小东西主要有限具有生产这个回复能力.","created_at":"2019-10-18T18:05:40.848881+08:00","ip_mac_bond":false,"parent_link":null,"layer":24,"parent_ip":""},{"id":24,"name":"喜欢说明点击法律这","category":"Screen","ip":"123.238.191.95","mac":"34:75:5A:B5:24:B0","value":1,"description":"来源学校进行业务行业需要运行日期技术.","created_at":"2019-10-18T18:05:40.743893+08:00","ip_mac_bond":true,"parent_link":25,"layer":24,"parent_ip":"143.31.181.54"}],"name":"过程监控层"},{"id":26,"devices":[],"name":"123"},{"id":29,"devices":[],"name":"第27层"},{"id":30,"devices":[],"name":"第27层"},{"id":31,"devices":[{"id":45,"name":"第31层的交换机","category":"Exchanger","ip":null,"mac":null,"value":1,"description":"","created_at":"2019-11-05T14:02:48.008796+08:00","ip_mac_bond":false,"parent_link":null,"layer":31,"parent_ip":""}],"name":"新增层mmmm"},{"id":32,"devices":[{"id":46,"name":"第32层的交换机","category":"Exchanger","ip":null,"mac":null,"value":1,"description":"","created_at":"2019-11-05T14:04:24.011547+08:00","ip_mac_bond":false,"parent_link":null,"layer":32,"parent_ip":""}],"name":"新增层mmmm"},{"id":33,"devices":[{"id":47,"name":"第33层的交换机","category":"Exchanger","ip":null,"mac":null,"value":1,"description":"","created_at":"2019-11-05T14:05:05.579368+08:00","ip_mac_bond":false,"parent_link":46,"layer":33,"parent_ip":null}],"name":"新增层mmmm"}],
            // 当前层级以及对应的所有设备信息
            currentLevel: {"id":34,"devices":[{"id":48,"name":"第34层的交换机","category":"Exchanger","ip":null,"mac":null,"value":1,"description":"","created_at":"2019-11-05T14:06:15.591284+08:00","ip_mac_bond":false,"parent_link":47,"layer":34,"parent_ip":null}],"name":"新增层mmmm"},
            // 所有层级对应的是否全选标记
            checkAll: [false,false,false,false,false,false,false,false,false],
            indeterminates: [true,true,true,true,true,true,true,true,true],
            // 全选选中的设备
            checkAllGroup: [[], [], [], [], [], [],[],[],[]],
            layerId: null
        }
    },
    mounted () {
        // if (this.isBatchImportRender) {
        //     this.getAllLayer()
        // }
    },
    methods: {
        getAllLayer () {
            this.$ajax.get(catchAPI('DEVICE_LAYER_DEVICE', this)).then(res => {
                // 自动登出
                this.handleResponseWithCom(res)
                if (res.status === 200) {
                    this.layerDevice = []
                    this.checkAll = []
                    // this.checkAllGroup = []
                    this.indeterminates = []
                    res.data.map((layer) => {
                        if (!layer.id) {
                            layer.id = 'default'
                        }
                        if (layer.id !== this.level.id) {
                            this.layerDevice.push(layer)
                            this.checkAll.push(false)
                            this.indeterminates.push(true)
                            // this.checkAllGroup.push([])
                        }

                        if (layer.id === this.level.id) {
                            this.currentLevel = layer
                            this.currentLevel.id = this.currentLevel.id.toString()
                        }
                    })
                } else {
                    // 处理错误
                    console.log('报错')
                }
            })
        },
        // 将设备转换到对应层级
        transferDeviceToLevel () { },
        // 删除勾选的设备
        delCheckedAsset () { },
        // 确定转换层级
        queryTransfer () { },
        // 处理全选
        handleCheckAll (index) {
            // this.layerId = id
            // console.log(id, index, 'layerId', this.layerId)
            // if (this.indeterminates[index]) {
            //     this.checkAll[index] = false
            // } else {
            //     this.checkAll[index] = !this.checkAll[index]
            // }
            // this.indeterminates[index] = false
            // if (this.checkAll[index]) {
            //     this.layerDevice.map(layer => {
            //         if (layer.id === this.collapseName || layer.id === Number(this.collapseName[0])) {
            //             layer.devices.map(device => {
            //                 this.checkAllGroup[index].push(device.id)
            //             })
            //         }

            //     })
            // } else {
            //     this.checkAllGroup[index] = []
            // }
            // console.log(this.checkAll)
            // console.log(this.indeterminates)
            // console.log(this.checkAllGroup)
            if (this.indeterminate[index]) {
                    this.checkAll[index] = false;
                } else {
                    this.checkAll[index] = !this.checkAll[index];
                }
                this.indeterminate[index] = false;

                if (this.checkAll[index]) {
                    this.checkAllGroup[index] = ['香蕉', '苹果', '西瓜'];
                } else {
                    this.checkAllGroup[index] = [];
                }

            console.log(this.indeterminate[0], this.checkAll[0], this.checkAllGroup[0])
        },
        // 判断是否全选
        checkAllGroupChange: function (data) {
            // this.layerDevice.map((layer, index) => {
            //     if (this.layerId === layer.id) {
            //         if (data.length === layer.devices.length) {
            //             this.indeterminates[index] = false
            //             this.checkAll[index] = true
            //             console.log(this.checkAll)
            //             console.log(this.indeterminates)
            //             console.log(this.checkAllGroup)
            //         } else if (data.length > 0) {
            //             this.indeterminates[index] = true
            //             this.checkAll[index] = false
            //         } else {
            //             this.indeterminates[index] = false
            //             this.checkAll[index] = false
            //         }
            //     }
            // })
            if (data.length === 3) {
                    this.indeterminate[0] = false;
                    this.checkAll[0] = true;
                } else if (data.length > 0) {
                    this.indeterminate[0] = true;
                    this.checkAll[0] = false;
                } else {
                    this.indeterminate[0] = false;
                    this.checkAll[0] = false;
                }
console.log(this.indeterminate[0], this.checkAll[0], this.checkAllGroup[0])

        },
        // 取消转换层级
        cancelTransfer () {
            this.$emit('on-close')
        },
        // 折叠面板切换面板时触发
        collapseChange (key) {
            console.log(key, key.length)
            // if (key.length === 0) {
            //     this.collapseName = 'default'
            // }
        }
    }
}
</script>
<style>
.fold-shuttle-content {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}
.ivu-collapse {
    width: 420px;
    background-color: transparent;
}
.ivu-collapse-header {
    background-color: #eee;
    height: 48px;
    line-height: 48px;
}
.ivu-collapse-content-box,
.ivu-collapse-content {
    padding: 0;
}

.all-level .ivu-collapse-content > .ivu-collapse-content-box {
    max-height: 389px;
    overflow-y: auto;
}

.ivu-collapse li {
    padding: 0 16px;
    border-bottom: 1px solid #d8d8d8;
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.ivu-collapse li p {
    display: inline-block;
    width: 180px;
}

.ivu-btn-icon-only {
    height: 36px;
    width: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ivu-checkbox-indeterminate .ivu-checkbox-inner:after {
    left: 5px;
    top: 8px;
}

/*.ivu-checkbox + span {
    display: none;
}*/

</style>
